<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑评论 - 内容评级平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4cc9f0;
            --dark: #1d3557;
            --darker: #0d1b2a;
            --light: #f8f9fa;
            --gray: #8d99ae;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --card-bg: rgba(29, 53, 87, 0.8);
            --transition: all 0.3s ease;
        }

        body {
            background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
            color: var(--light);
            min-height: 100vh;
            background-attachment: fixed;
            line-height: 1.6;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }

        .edit-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .edit-header {
            margin-bottom: 2rem;
        }

        .edit-title {
            font-size: 1.8rem;
            color: var(--accent);
            margin-bottom: 0.5rem;
            position: relative;
            padding-left: 1rem;
        }

        .edit-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: var(--accent);
            border-radius: 2px;
        }

        .content-preview {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .content-header {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .content-info h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

        .content-meta {
            color: var(--gray);
            font-size: 0.9rem;
        }

        .edit-form {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.8rem;
            font-weight: 500;
        }

        .rating-stars {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .star {
            font-size: 2rem;
            color: var(--gray);
            cursor: pointer;
            transition: var(--transition);
        }

        .star:hover, .star.active {
            color: var(--warning);
            transform: scale(1.1);
        }

        .rating-description {
            color: var(--gray);
            font-size: 0.9rem;
            margin-top: 0.5rem;
        }

        .form-control {
            width: 100%;
            padding: 0.8rem;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            color: var(--light);
            font-family: inherit;
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(76, 201, 240, 0.3);
        }

        textarea.form-control {
            min-height: 200px;
            resize: vertical;
        }

        .error-message {
            color: var(--danger);
            font-size: 0.9rem;
            margin-top: 0.5rem;
            display: none;
        }

        .has-error .error-message {
            display: block;
        }

        .has-error .form-control {
            border-color: var(--danger);
        }

        .message {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 24px;
            border-radius: 8px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: slideIn 0.3s ease;
        }

        .message-success {
            background: var(--success);
            color: white;
        }

        .message-error {
            background: var(--danger);
            color: white;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @media (max-width: 768px) {
            .content-header {
                flex-direction: column;
                text-align: center;
            }

            .form-actions {
                flex-direction: column;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
<%@ include file="navbar.jsp" %>

<div class="edit-container">
    <div class="edit-header">
        <h1 class="edit-title">编辑评论</h1>
    </div>

    <div class="content-preview">
        <div class="content-header">
            <div class="content-info">
                <h3>${comment.contentTitle}</h3>
                <div class="content-meta">
                    <c:choose>
                        <c:when test="${comment.contentType == 'movie'}">电影</c:when>
                        <c:when test="${comment.contentType == 'book'}">图书</c:when>
                        <c:when test="${comment.contentType == 'music'}">音乐</c:when>
                    </c:choose>
                </div>
            </div>
        </div>
    </div>

    <form id="editCommentForm" class="edit-form">
        <input type="hidden" name="commentId" value="${comment.id}">

        <div class="form-group">
            <label class="form-label">
                <i class="fas fa-star"></i> 您的评分
            </label>
            <div class="rating-stars">
                <c:forEach begin="1" end="5" var="i">
                    <i class="star fas ${i <= comment.rating ? 'fa-star active' : 'far fa-star'}"
                       data-rating="${i}"
                       onclick="setRating(${i})"></i>
                </c:forEach>
            </div>
            <p class="rating-description" id="ratingDescription">
                <c:choose>
                    <c:when test="${comment.rating == 1}">很差，不推荐</c:when>
                    <c:when test="${comment.rating == 2}">较差，有待改进</c:when>
                    <c:when test="${comment.rating == 3}">一般，中规中矩</c:when>
                    <c:when test="${comment.rating == 4}">很好，推荐观看</c:when>
                    <c:when test="${comment.rating == 5}">非常棒，强烈推荐</c:when>
                </c:choose>
            </p>
            <input type="hidden" id="rating" name="rating" value="${comment.rating}">
        </div>

        <div class="form-group">
            <label for="commentContent" class="form-label">
                <i class="fas fa-pen"></i> 评论内容
            </label>
            <textarea id="commentContent" name="content" class="form-control" required>${comment.content}</textarea>
            <div class="error-message" id="contentError">评论内容不能为空</div>
        </div>

        <div class="form-actions">
            <button type="button" class="btn btn-outline" onclick="window.history.back()">
                <i class="fas fa-arrow-left"></i> 取消
            </button>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> 保存更改
            </button>
        </div>
    </form>
</div>

<%@ include file="footer.jsp" %>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 设置评分
    function setRating(rating) {
        $('.star').each(function() {
            const starRating = parseInt($(this).data('rating'));
            $(this).toggleClass('fas active', starRating <= rating);
            $(this).toggleClass('far', starRating > rating);
        });
        $('#rating').val(rating);

        const descriptions = ["很差，不推荐", "较差，有待改进", "一般，中规中矩", "很好，推荐观看", "非常棒，强烈推荐"];
        $('#ratingDescription').text(descriptions[rating - 1]);
    }

    // 表单提交
    $('#editCommentForm').submit(function(e) {
        e.preventDefault();
        const rating = $('#rating').val();
        const content = $('#commentContent').val().trim();
        let isValid = true;

        if (!rating || rating < 1 || rating > 5) {
            isValid = false;
            $('#ratingDescription').css('color', 'var(--danger)').text('请选择评分');
        }

        if (!content) {
            isValid = false;
            $('#commentContent').addClass('has-error');
            $('#contentError').show();
        } else {
            $('#commentContent').removeClass('has-error');
            $('#contentError').hide();
        }

        if (!isValid) return;

        const submitBtn = $(this).find('button[type="submit"]');
        const originalHtml = submitBtn.html();
        submitBtn.html('<i class="fas fa-spinner fa-spin"></i> 保存中...');
        submitBtn.prop('disabled', true);

        const formData = {
            commentId: $(this).find('input[name="commentId"]').val(),
            rating: rating,
            content: content
        };

        $.ajax({
            url: '${pageContext.request.contextPath}/edit-comment',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    showMessage('评论更新成功', 'success');
                    setTimeout(() => {
                        window.location.href = '${pageContext.request.contextPath}/user-comments';
                    }, 1500);
                } else {
                    showMessage(response.message || '更新失败', 'error');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX请求失败:', status, error);
                showMessage('网络错误，请稍后再试', 'error');
            },
            complete: function() {
                submitBtn.html(originalHtml);
                submitBtn.prop('disabled', false);
            }
        });
    });

    // 显示消息
    function showMessage(message, type) {
        $('.message').remove();
        const messageDiv = $('<div>').addClass('message').addClass(type === 'success' ? 'message-success' : 'message-error');
        const icon = $('<i>').addClass('fas').addClass(type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle');
        const text = $('<span>').text(message);
        messageDiv.append(icon).append(text).appendTo('body');

        setTimeout(() => {
            messageDiv.fadeIn(300);
        }, 10);

        setTimeout(() => {
            messageDiv.fadeOut(500, function() { $(this).remove(); });
        }, 3000);
    }
</script>
</body>
</html>